<template>
    <div id="views">
      <section class="sec1">
        <button :class="tabbarIndex === 0 ? 'active' : ''" @click="tabbarIndex = 0">提现</button>
        <button :class="tabbarIndex === 1 ? 'active' : ''" @click="tabbarIndex = 1">入账</button>
      </section>
      <ul class="list" v-if="tabbarIndex === 0">
        <li v-for="(item , index) in list" :key="item.id" @click="withDrawItemClick(item)">
<!--        <li >-->
          <div class="left">
            <p class="p1">{{item.withdraw_money}} CNY</p>
            <p class="p2">{{item.withdraw_name.split('_')[0]}}提成账户</p>
            <p class="p3">{{item.create_time}}</p>
          </div>
          <div class="right canGet" v-if="item.textState == 1">
            <p class="p1 isRunning">
              <span>提现中</span>
              <img src="../../common/imgs/arrowright.png" alt="">
            </p>
            <p class="p2"  v-if="item.state == 4">
              <a href="javascript:void 0;" class="yellowbtn">领取税筹任务</a>
            </p>
            <p class="p2"  v-if="item.state == 7 || item.state == 9">
              <a href="javascript:void 0;" class="yellowbtn">提交任务凭证</a>
            </p>
          </div>
          <div class="right success" v-if="item.textState == 2">
            <p class="p1 isRunning">
              <span>成功</span>
              <img src="../../common/imgs/arrowright.png" alt="">
            </p>
          </div>
          <div class="right fail" v-if="item.textState == 3">
            <p class="p1 isRunning">
              <span>失败</span>
              <img src="../../common/imgs/wapGth.png" alt=""
                   style="height: 0.25rem;margin-right: 0.25rem" @click.stop="showRemark(item)"  v-if="is_natural_person != 1">
              <img src="../../common/imgs/arrowright.png" alt="">
            </p>
          </div>
        </li>
      </ul>
      <ul class="entryList" v-if="tabbarIndex === 1">
        <li v-for="(item , index) in list" :key="item.id">
          <p class="p1">{{item.currency_name.split('_')[0]}}提成账户</p>
          <p class="p2">
            <span class="left">{{item.add_time}}</span>
            <span class="right">{{item.num}} CNY</span>
          </p>
        </li>
      </ul>
      <div class="isNull" v-if="!showLoading">
        <div>
          <p><img src="../../common/imgs/taxRewardNull.png" alt=""></p>
          <p>暂无记录</p>
        </div>
      </div>
      <p class="loadInfo" v-if="showLoading" @click="">{{loadInfo}}</p>
      <dia-log title="失败原因" confirmBtn="确定" ref="dl"/>
    </div>
</template>
<script>
  import { withdrawList , EntryRecord} from '../../http/api';
  import {apiReady} from "../../common/js/initApiApp";
  // 1审核中
     // 2提现成功 3拒绝,
  // 4审核创建任务成功5领取任务审核中6众乐邦拒绝领取任务7众乐邦通过领取任务
  // 8凭证审核中9众乐邦拒绝凭证 10 众乐邦通过凭证 11 提交打款请求 13 打款失败
  export default {
    name: "list",
    inject : ['reload'],
    data(){
      return {
        tabbarIndex : 0,
        list : [],
        account : null,//用户信息
        page : 0, //当前页
        totalPage : 1, //总页数
        pageSize : 15,//加载量
        acceptLoad : true, //加载限制
        showLoading : true,//是否显示加载
        loadInfo : '加载中...',
        app : null ,//apicloud
        is_natural_person : 2,//自然人
        loadBtnDisable : true,
      }
    },
    watch:{
      'tabbarIndex'(){
        this.page = 0;
        this.totalPage = 1;
        this.acceptLoad = true;
        this.showLoading = true;
        this.loadInfo = '加载中...';
        this.list = [];
        this.loadPage();
      }
    },
    components:{
      DiaLog: resolve => { require(['@/components/dialogTwo'], resolve) },
    },
    mounted() {
      let thiz = this;
      // withdrawList();
      // thiz.delWindowListen();
      window.apiready = function(){
        thiz.app = apiReady.ready();
        thiz.account = thiz.app.getAccount();
        thiz.app.closeFlower(0);
        thiz.loadPage();
        thiz.app.listen('loadList',function () {
          thiz.initialize();
        });
      };
    },
    methods:{
      showRemark(item){
        let remark = item.remark || '已失败';
        let ele = `<p style="font-size: 0.28rem;padding-bottom:0.21rem;text-align: center;">${remark}</p>`;
        this.$refs.dl.changeContent(ele);
        this.$refs.dl.dialogShow();
      },
      initialize(){
        // this.delWindowListen();
        this.tabbarIndex = 0;
        this.page = 0;
        this.totalPage = 1;
        this.acceptLoad = true;
        this.showLoading = true;
        this.loadInfo = '加载中...';
        this.list = [];
        this.loadPage();
      },
      loadWithDrawList(){
        let thiz = this;
        let params = {
          token : this.account.token,
          version : thiz.app.inAV,
          page : this.page + 1,
          pageSize : this.pageSize,
        };
        // thiz.log('ajax params', params);
        withdrawList(params).then(res => {
          thiz.log('提现列表',res);
          if(res.code == 200){
            let data = res.data;
            thiz.is_natural_person = data.is_natural_person;
            let list = data.lists;
            thiz.for(list, (item ,index) => {
              let state = Number(item.state);
              let failState = [3]; //失败
              let textState; //2成功  3失败  1进行中
              if(failState.indexOf(state) > -1){
                textState = 3;
              }
              else{
                if(state == 2){
                  textState = 2;
                }else{
                  textState = 1;
                }
              }
              item.textState = textState;
            });
            thiz.list = thiz.list.concat(list);
            thiz.totalPage = Number(data.total_page);
            thiz.page = Number(data.current_page);
            thiz.afterGetList();
          }
        }).catch(err => {
          thiz.log('错误信息',err);
        });
      },
      loadEntryRecord(){
        let thiz = this;
        let params = {
          token : this.account.token,
          version : thiz.app.inAV,
          page : this.page + 1,
          pageSize : this.pageSize,
        };
        EntryRecord(params).then(res => {
          // thiz.log('入账记录++++++++++',res);
          if(res.code == 200){
            let data = res.data;
            let list = data.list;
            thiz.for(list,(item , index) => {
              item.num = thiz.numSlice( item.num , 2);
            });
            thiz.list = thiz.list.concat(list);
            thiz.totalPage = Number(data.total_page);
            thiz.page = Number(data.current_page);
            thiz.afterGetList();
          }
        });
      },
      loadPage(){
        let thiz = this;
        if( !thiz.acceptLoad || thiz.page >= this.totalPage){
          return;
        }
        thiz.acceptLoad = false;
        if(thiz.tabbarIndex === 0){
          thiz.loadWithDrawList();
        } else {
          thiz.loadEntryRecord();
        }
      },
      loadMore(){
        let thiz = this;
        if( thiz.acceptLoad ){
          thiz.loadPage();
        }
      },
      afterGetList(){
        let len = this.list.length;
        let thiz = this;
        let app = thiz.app;
        this.showLoading = len === 0 ? false : true;
        if( this.page >= this.totalPage || len === 0){
          this.loadInfo = '到底了...';
          this.acceptLoad = false;
        } else {
          this.loadInfo = '加载更多...';
          this.acceptLoad = true;
        }
        app.toBottom(function () {
          thiz.loadPage();
        });
      },
      withDrawItemClick(item){
        let state = Number(item.state);
        let order_num = item.order_num;
        let thiz = this;
        // thiz.log('点击获取自然人===================' , thiz.is_natural_person);
        let is_natural_person = thiz.is_natural_person;
        if(is_natural_person != 1){
          return;
        }
        let stateObj = [
          {
            router : '/taxReward_step1', name : 'step_1', arr : [1,4,15,14] //1 = 15 = 14
          },
          {
            router : '/taxReward_step2', name : 'step_2',arr : [5,6,7]
          },
          {
            router : '/taxReward_step3', name : 'step_3',arr : [8,9,10,11,13] //10 = 11 = 13
          },
          {
            router : '/taxReward_step4', name : 'step_4',arr : [2]
          },
          {
            router : '/taxReward_stepCancel', name : 'step_cancel',arr : [3]
          },
        ];
        // 1审核中
        // 2提现成功 3拒绝,
        // 4审核创建任务成功
        // 5领取任务审核中6众乐邦拒绝领取任务7众乐邦通过领取任务
        // 8凭证审核中9众乐邦拒绝凭证 10 众乐邦通过凭证 11 提交打款请求 13 打款失败
        let app = thiz.app;
        let location = window.location.href.split('#')[0]+'#';
        thiz.delWindowListen();
        thiz.for(stateObj, (item , index) => {
          let arr = item.arr;
          let router = item.router;
          if( arr.indexOf(state) > -1){
            let path = location + router + '?order_num='+ order_num;
            app.trigger('task_goPage',{ path : path , name : item.name});
            // thiz.$router.push({path:router , query :{ order_num : order_num} })
          }
        });
      },
      delWindowListen(){
        let thiz = this;
        window.removeEventListener('scroll', thiz.loadMore , true);
      }
    },
    beforeDestroy() {
      let thiz = this;
      window.removeEventListener('scroll', thiz.loadMore , true);
      this.app = null;
    },
  }
</script>

<style lang="less" type="text/less" scoped>
  #views{
    background: #F8F8F8;
    >.sec1{
      background: #fff;text-align: center;position: fixed;z-index: 2;top: 0;left: 0;width: 100%;
      >button{
        background: none;height: 0.7rem;width: 1rem;margin-right: 2.6rem;color: #999;font-size: 0.3rem;display: inline-block;line-height: 0.7rem;
        &:last-child{
          margin-right: 0;
        }
        &:hover{
          color: #262626;
        }
        &.active{
          color: #262626;position: relative;
          &:after{
            content: '';display: inline-block;width: 100%;height: .05rem;bottom: 0;left: 0;background: #FED130;position: absolute;
          }
        }
      }
    }
    >.list{
      padding: 0 0.3rem;padding-top: 0.7rem;
      >li{
        background: #fff;border-radius: 0.04rem;margin-top: 0.2rem;overflow: hidden;padding: 0.24rem;
        &:hover{
          cursor: pointer;
        }
        &:first-child{
          margin-top: 0.3rem;
        }
        >div{
          float: left;
          &:last-child{
            float: right;
          }
        }
        >.left{
          color: #999;
          >p{
            padding-top: 0.14rem;font-size: 0.24rem;
          }
          >.p1{
            color: #262626;font-size: 0.28rem;padding-top: 0;
          }
        }
        >.right{
          >.p1{
            text-align: right;
            >img{
              height: 0.15rem;vertical-align: middle;
            }
            >span{
              padding-right: 0.04rem;font-size: 0.24rem;vertical-align: middle;
            }
          }
          >.isRunning{
            color: #ED5252;
          }
          >.p2{
            >a{
              height: 0.52rem;line-height: 0.52rem;padding: 0 0.19rem;font-size: 0.24rem;margin-top: 0.25rem;
            }
          }
        }
        >.success{
          >.p1>span{
            color: #17BE8D;
          }
        }
        >.fail{
          >.p1>span{
            color: #B3B3B3;
          }
        }
      }
    }
    >.entryList{
      padding: 0 0.3rem;
      padding-top: 0.7rem;
      >li{
        background: #fff;padding: 0 0.25rem;margin-top: 0.21rem;border-radius: 0.04rem;
        &:first-child{
          margin-top: 0.3rem;
        }
        >.p1{
          color: #262626;font-size: 0.28rem;padding-top: 0.22rem;
        }
        >.p2{
          color: #262626;padding-top: 0.22rem;overflow: hidden;padding-bottom: 0.21rem;
          >span{
            font-size: 0.24rem;
            &.left{
              color: #999999;float: left;
            }
            &.right{
              color: #262626;float: right;
            }
          }
        }
      }
    }
    >.isNull{
      text-align: center;font-size: 0;padding: 0;position: absolute;z-index: 1;left: 0;top:0;width: 100%;height: 100%;
      >div{
        position: absolute; top: 42%;width: 100%;text-align: center;
        >p{
          >img{
            width: 1.6rem;
          }
          &:last-child{
            font-size: 0.3rem;padding: 0.35rem 0;color: #999;
          }
        }
      }
    }
  }
  .loadInfo{
    text-align: center;font-size: 0.24rem;line-height: 0.35rem;color: #9B9B9B;padding: 0.3rem 0;
  }
</style>
